import { optionList } from "@/utils/defalutData";
// let chartBox = document.getElementById("canvas");
// var myChart = echarts.init(chartBox);
// chartBox.oncontextmenu = function(ev){
//   ev.preventDefault();
// }
const dateList: any[] = [];
const valueList: any[] = [];
const xA: any[] = [];
const yA: any[] = [];
const se: any[] = [];
const gr: any[] = [];
const ti: any[] = [];

for (let i = 0; i < 15; i++) {
  dateList.push(0);
  valueList.push(null);
}

for (const i of optionList) {
  xA.push({
    type: "category",
    boundaryGap: false,
    axisTick: {
      show: false
    },
    axisLabel: {
      show: false
    },
    axisLine: {
      onZero: false,
      lineStyle: {
        color: "#CCC"
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: "#ccc",
        type: "dashed",
        width: 1
      }
    },
    data: dateList,
    gridIndex: i.title - 1
  });
  yA.push({
    type: "value",
    axisLine: {
      show: true,
      lineStyle: {
        color: "#CCC"
      }
    },
    axisLabel: {
      fontSize: 10,
      color: "#666"
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "#CCC"
      }
    },
    min: null,
    max: null,
    splitNumber: 3,
    gridIndex: i.title - 1
  });
  se.push({
    name: i.title,
    type: "line",
    showSymbol: false,
    data: valueList,
    xAxisIndex: i.title - 1,
    yAxisIndex: i.title - 1
  });
  gr.push({
    show: true,
    borderWidth: 0,
    shadowColor: "rgba(0, 0, 0, 0.3)",
    shadowBlur: 2,
    containLabel: true,
    width: "10%",
    height: "10%"
  });
  ti.push({
    textAlign: "center",
    text: i.title,
    textStyle: {
      fontSize: 12,
      color: "black"
    }
  });
}
for (const i in gr) {
  gr[i].left = optionList[i].left;
  gr[i].top = optionList[i].top;
  ti[i].left = parseFloat(gr[i].left) + parseFloat(gr[i].width) - 0.5 + "%";
  ti[i].top = parseFloat(gr[i].top) - 1.5 + "%";
}
export const option: any = {
  animation: false,
  // tooltip: {},
  // geo:{},
  toolbox: {
    show: false
  },
  brush: {
    toolbox: ["rect"],
    transformable: false,
    throttleType: "debounce",
    throttleDelay: 300,
    geoIndex: "all",
    removeOnClick: true
  },
  title: ti,
  xAxis: xA,
  yAxis: yA,
  grid: gr,
  series: se
};

// 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// let clickArr = [];
// myChart.getZr().on("click", function (param) {
//   if (param.topTarget) {
//     let pass = getIndex(param.topTarget);
//     if (clickArr.indexOf(pass) === -1) {
//       clickArr.push(pass);
//     }
//     changeTitle(clickArr);
//   }
// });
// myChart.getZr().on('contextmenu', function (param) {
//   if (param.topTarget) {
//     let pass = getIndex(param.topTarget);
//     console.log(pass)
//     // changeTitle(clickArr);
//   }
// });

// 修改title颜色
// function changeTitle(arr) {
//   for (let i of arr) {
//     ti[i - 1].textStyle.color = "green";
//   }
//   myChart.setOption({ title: ti });
// }

// let setTime = null;
// let x = 0;

// function start() {
//   setTime = setTimeout(() => {
//     clearTimeout(setTime);
//     dateList.shift();
//     dateList.push(x++);
//     valueList.shift();
//     valueList.push(Math.random());
//     for (let i in optionList) {
//       xA[i].data = dateList;
//       se[i].data = valueList;
//     }
//     myChart.setOption({
//       xAxis: xA,
//       series: se,
//     });
//     start();
//   }, 1000);
// }
// function end() {
//   console.log("end");
//   clearTimeout(setTime);
// }

// let time = [];
// function drawLine() {
//   time.push(x);
//   for (let i in optionList) {
//     xA[i].splitLine = {
//       show: true,
//       interval: (index, value) => {
//         if (time.indexOf(parseInt(value)) !== -1) {
//           return true;
//         }
//       },
//       lineStyle: {
//         color: "red",
//         width: 2,
//         type: "dashed",
//       },
//     };
//   }
//   myChart.setOption({
//     xAxis: xA,
//   });
// }
// myChart.dispatchAction({
//   type: "takeGlobalCursor",
//   key: "brush",
//   brushOption: {
//     brushType: "rect",
//     brushMode: "single",
//   },
// });
// myChart.on("brushSelected", renderBrushed);
// function renderBrushed(params) {
//   console.log(params);
//   myChart.dispatchAction({
//     type: "brush", //选择action行为
//     areas: [], //areas表示选框的集合，此时为空即可。
//   });
// }

// let isZishiy = true;
// function zishiy() {
//   if (isZishiy) {
//     for (let i in optionList) {
//       yA[i].min = -1;
//       yA[i].max = 1;
//     }
//   } else {
//     for (let i in optionList) {
//       yA[i].min = null;
//       yA[i].max = null;
//     }
//   }
//   isZishiy = !isZishiy;
//   myChart.setOption({
//     yAxis: yA,
//   });
// }
